<template>
    <div  class='app-time-select'>
        <el-input v-model="value" @focus="onFocus" :prefix-icon="prefix" :placeholder="placeholder"></el-input>
        <div v-if="visible" class='app-time-select-wrapper'>
            <div class='app-time-select-container' @click.self="close">
                <div class='app-time-select-inner' :style="{height: height + 'px'}">
                    <header class='app-time-select-header'>
                        <div class="cancel" @click="close">取消</div>
                        <div slot="header-title" class="title">选择完整时间</div>
                        <div class="confirm" @click="confirm()">确认</div>
                    </header>
                    <section class='app-time-select-content' ref="listContainer">
                        <div class="list-model"></div>
                        <scrollList v-model="selectYear" :value="yearList" :listItemHeight="listItemHeight"></scrollList>
                        <scrollList v-model="selectMonth" :value="monthList" :listItemHeight="listItemHeight"></scrollList>
                        <scrollList v-model="selectDay" :value="dayList" :listItemHeight="listItemHeight"></scrollList>
                        <scrollList v-model="selectHour" :value="hourList" :listItemHeight="listItemHeight"></scrollList>
                        <scrollList v-model="selectMinute" :value="minuteList" :listItemHeight="listItemHeight"></scrollList>
                    </section>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import scrollList from './scrollList.vue';
export default {
    name: 'app-time-select',
    components: { scrollList },
    model: {
        props: 'value',
        event: 'timeSelect'
    },
    props: {
        height: {
            type: Number,
            default: 356
        },
        minYear: {
            type: Number,
            default: 2000
        },
        maxYear: {
            type: Number,
            default: new Date().getFullYear()
        },
        value: String,
        prefix: {
            type: String,
            default: 'el-icon-date'
        },
        placeholder: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            visible: false,
            currentDateTime: new Date(),
            selectYear: new Date().getFullYear(),
            selectMonth: new Date().getMonth() + 1,
            selectDay: new Date().getDate(),
            selectHour: new Date().getHours(),
            selectMinute: new Date().getMinutes(),
            selectSecond: 0
        }
    },
    computed: {
        dayList () {
            let dayNum = new Date(this.selectYear, this.selectMonth, 0).getDate();
            return this.range(1, dayNum);
        },
        monthList () {
            return this.range(1, 12);
        },
        yearList () {
            return this.range(this.minYear, this.maxYear - this.minYear + 1);
        },
        hourList () {
            return this.range(0, 24);
        },
        minuteList () {
            return this.range(0, 60);
        },
        listItemHeight () {
            return 50;
        },
        selectedToString () {
            return `${this.selectYear}-${this.formatTime(this.selectMonth)}-${this.formatTime(this.selectDay)} ${this.formatTime(this.selectHour)}:${this.formatTime(this.selectMinute)}:${this.formatTime(this.selectSecond)}`
        }
    },
    created () {
        if (!this.value) return;
        let [date, time] = this.value.split(' ');
        if (!date) return;
        [this.selectYear, this.selectMonth, this.selectDay] = date.split('-').map(Number);
        if (!time) return;
        [this.selectHour, this.selectMinute, this.selectSecond] = time.split(':').map(Number);
    },
    mounted () {
    },
    watch: {
    },
    methods: {
        range (from, length) {
            if (arguments.length === 1) {
                length = from;
                from = 0;
            }
            return Array.from({ length }).map((_, index) => from + index);
        },
        confirm () {
            this.$emit('timeSelect', this.selectedToString);
            this.$emit('change', this.selectedToString);
            this.close();
        },
        close () {
            this.visible = false;
        },
        formatTime(value) {
            return Number(value) < 10 ? '0' + Number(value) : value;
        },
        onFocus() {
            this.visible = true
            window.document.activeElement.blur();
        }
    }
}
</script>

<style lang='scss' scoped>
.app-time-select-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 99999;

    .app-time-select-container {
        position: relative;
        top: 0;
        bottom: 0;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }
}
.app-time-select-inner {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #181c29;

    .app-time-select-header {
        height: 50px;
        padding: 19px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
            font-size: 18px;
            font-weight: 500;
            color: #ffffff;
        }

        .cancel {
            font-size: 16px;
            color: #d6d6d6;
        }

        .confirm {
            font-size: 16px;
            color: #3875ff;
        }
    }

    .app-time-select-content {
        position: relative;
        height: calc(100% - 50px);
        display: flex;

        .list-model {
            width: 100%;
            height: 100%;
            position: absolute;
            pointer-events: none;
            background: linear-gradient(
                180deg,
                #181c29 0%,
                rgba(35, 41, 56, 0) 47%,
                #181c29 100%
            );
        }

        ul {
            overflow: auto;

            li {
                height: 70px;
                width: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #8b8f97;
                border-bottom: 1px solid;

                &:active {
                    color: #ffffff;
                }
            }
        }
    }
}

.scroll-list {
    flex: 1;
}
</style>